// import { CameraFace, configType, screenFace } from "@/tyeps/OvenLiveKit"
// import LiveStream from "@/utils/live/live"

// interface ImageCapturesFace {
//   Screen: any[],
//   Camera: any[]
// }
// interface drawFrameFace {
//   videoWidth: number,
//   videoHeight: number,
//   canvasWidth: number,
//   canvasHeight: number,
//   videoElement: HTMLVideoElement,
//   x: number,
//   y: number
//   scale: number
// }
// export default class LiveCavans {
//   configs: configType = []
//   id: string = ""
//   dom: HTMLCanvasElement | null = null
//   ImageCaptures: ImageCapturesFace = {
//     Screen: [],
//     Camera: []
//   }
//   canvasContext: CanvasRenderingContext2D | null = null
//   frameId: number = 0
//   constructor(configs: configType, id: string) {
//     this.configs = configs
//     this.id = id
//     this.init()
//   }
//   async init() {

//     // 1 获取cavans
//     this.dom = document.getElementById(this.id) as HTMLCanvasElement
//     this.canvasContext = this.dom?.getContext('2d');
//     if (this.canvasContext) {
//       this.canvasContext.imageSmoothingEnabled = false;
//       this.canvasContext.imageSmoothingQuality = 'high';  // 高质量插值
//     }

//     // 2 根据配置获取流
// const data:drawFrameFace[] = []
//     try {
//       for (let index = 0; index < this.configs.length; index++) {
//         const config = this.configs[index];
//         if (config.type === "Camera") {
//           await LiveStream.getUserMedia(config)

//         } else {
//           await LiveStream.getDisplayMedia(config)

//         }
//        const res =  await this.getstreamInfo(config)
//        data.push(res)
//       }

//       this.drawFrame(data)
//       console.log(this.configs)
//     } catch (error) {
//       console.log(error)
//       return
//     }
//   }

//   getstreamInfo(config: CameraFace | screenFace):Promise<drawFrameFace> {
//     return new Promise((resolve, reject)=>{{
//       const videoElement = document.getElementById(config.domId) as HTMLVideoElement
//       videoElement.srcObject = config.stream
//       videoElement.play()
//       const dpr = window.devicePixelRatio || 1;
//       videoElement.onloadedmetadata = () => {
//         const videoWidth = videoElement.videoWidth;
//         const videoHeight = videoElement.videoHeight;
//         if (config.type === "Screen") {
//           if (this.dom?.width) {
//             this.dom.width = videoWidth * dpr;
//           }
//           if (this.dom?.height) {
//             this.dom.height = videoHeight * dpr;
//           }
//         }
//         let scale = config.scale; // 默认无缩放
//         let x = config.x; // 默认x偏移
//         let y = config.y; // 默认y偏移
//         this.canvasContext?.scale(dpr, dpr);
//         // videoElement.style.width = `${videoWidth * scale}px`
//         // videoElement.style.height = `${videoHeight * scale}px`
//        resolve({
//         videoWidth: videoWidth,
//         videoHeight: videoHeight,
//         canvasWidth: this.dom?.width || 0,
//         canvasHeight: this.dom?.height || 0,
//         videoElement: videoElement,
//         x,
//         y,
//         scale
//       })
//       }
//     }})

//   }
//   drawFrame(datas: drawFrameFace[]) {
//     const slef = this

//     slef.canvasContext?.clearRect(0, 0, slef.dom?.width|| 0, slef.dom?.width|| 0);
//     // console.log(data.x, data.y, data.videoWidth * data.scale, data.videoHeight * data.scale)
//     // 将视频帧绘制到 Canvas
//     // slef.canvasContext?.drawImage(data.videoElement, data.x, data.y, data.videoWidth * data.scale, data.videoHeight * data.scale);
//     datas.forEach((e)=>{
//       // console.log(e)
//       slef.canvasContext?.drawImage(e.videoElement, e.x, e.y, e.videoWidth * e.scale, e.videoHeight * e.scale);
//     })
//     slef.frameId = requestAnimationFrame(() => slef.drawFrame.bind(slef)(datas));
//   }
//   change() {
//     for (let index = 0; index < this.configs.length; index++) {
//       const config = this.configs[index];
//       if (config.type === "Camera") {

//         this.getstreamInfo(config)
//       } else {
//         this.getstreamInfo(config)
//       }
//     }
//   }
//   close() {

//     cancelAnimationFrame(this.frameId)
//   }
// }
